<template>
    <div class="video-list-page">
        <!-- 操作按钮组 -->
        <div class="action-buttons">
            <el-button icon="Search" color='#7d2817'>搜索</el-button>
            <el-button type="success" icon="Plus" color="#7d2817" @click="openAddDialog">添加</el-button>
            <el-button type="danger" icon="Delete" color="#7d2817">删除</el-button>
            <el-button type="warning" icon="Top" color="#7d2817">置顶</el-button>
        </div>
        <!-- 数据表格 -->
        <el-table :data="videoList" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="title" label="视频标题" min-width="150" />
            <el-table-column prop="videoUrl" label="视频地址" min-width="200" />
            <el-table-column label="封面图片" width="120">
                <template #default="scope">
                    <el-image v-if="scope.row.coverImage" :src="scope.row.coverImage" style="width: 80px; height: 60px"
                        fit="cover" />
                    <div v-else
                        style="width: 80px; height: 60px; line-height: 60px; text-align: center; border: 1px dashed #ccc;">
                        无封面
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="80" />
            <el-table-column prop="addTime" label="添加时间" width="180" />
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button type="text" @click="openEditDialog(scope.row)">编辑</el-button>
                    <el-button type="text" :type="scope.row.isTop ? 'warning' : 'success'"
                        @click="handleTop(scope.row.id, !scope.row.isTop)">
                        {{ scope.row.isTop ? '取消置顶' : '置顶' }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 引入封装的视频弹窗组件 -->
        <AddVideoDialog :visible="dialogVisible" :dialog-type="dialogType" :edit-data="editData"
            @closeDialog="dialogVisible = false" @saveData="handleSaveData" />
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import AddVideoDialog from '../../components/videoDialog.vue'

// 模拟视频列表数据
const videoList = ref([
    {
        id: 1,
        title: '汽车维修技巧视频',
        videoUrl: 'https://example.com/car-repair.mp4',
        coverImage: '/image/7.jpg',
        sort: 3,
        addTime: '2025-10-01 10:30:00',
        isTop: false,
    },
    {
        id: 2,
        title: '新能源汽车介绍视频',
        videoUrl: 'https://example.com/new-energy-car.mp4',
        coverImage: '/image/17.jpg',
        sort: 1,
        addTime: '2025-10-02 14:15:00',
        isTop: true,
    },
    {
        id: 3,
        title: '汽车保养指南视频',
        videoUrl: 'https://example.com/car-maintain.mp4',
        coverImage: '',
        sort: 2,
        addTime: '2025-10-03 09:20:00',
        isTop: false,
    },
])

// 弹窗相关
const dialogVisible = ref(false)
const dialogType = ref('add')
const editData = ref({})

// 打开添加弹窗
const openAddDialog = () => {
    dialogType.value = 'add'
    dialogVisible.value = true
}

// 打开编辑弹窗
const openEditDialog = (row) => {
    dialogType.value = 'edit'
    editData.value = { ...row }
    dialogVisible.value = true
}

// 处理保存数据（添加或编辑）
const handleSaveData = (form) => {
    if (dialogType.value === 'add') {
        form.id = Date.now()
        form.addTime = new Date().toLocaleString()
        form.isTop = false
        videoList.value.unshift(form)
    } else {
        const index = videoList.value.findIndex((item) => item.id === form.id)
        if (index !== -1) {
            videoList.value[index] = { ...form }
        }
    }
}

// 处理置顶
const handleTop = (id, isTop) => {
    const item = videoList.value.find((item) => item.id === id)
    if (item) {
        item.isTop = isTop
        ElMessage.success(`${isTop ? '置顶' : '取消置顶'}成功`)
    }
}
</script>

<style scoped>
.video-list-page {
    padding: 20px;
}

.action-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.action-buttons .el-button {
    padding: 6px 12px;
}

.action-buttons .el-button--primary {
    background-color: #e53935;
    border-color: #e53935;
}

.action-buttons .el-button--primary:hover {
    background-color: #c62828;
    border-color: #c62828;
}
</style>